<template>
  <div @click="onCollect">
      <span :class="collecColor"></span>
      <div>{{this.collectType ==0?'收藏':'已收藏'}}</div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            collect: {
                id: this.collectId,
                type: 16,
                collectTypes: this.collectType
            },
            collecColor: 'collecColor-yes'
        }
    },
    mounted() {
        if (this.collectTypes != 1) {
            this.$set(this, 'collecColor', 'collecColor-no')
        } else {
            this.$set(this, 'collecColor', 'collecColor-yes')
        }
    },
    methods: {
        onCollect() {
            if(!this.utils.cookie('get','user')){
                mui.toast('请登录……')
                this.$router.push({path:'/login'})
                return
            }
            if (!this.collectTypes) {
                this.collect.id = this.collectId
                this.utils.$post(
                    this.utils.SET_COLLECTION,
                    data => {
                        if (data.data == 1) {
                           location.reload()
                        }
                    },
                    this.collect
                )
            }
        }
    },
    props: ['collectId', 'collectType'],
    watch: {
        collectType(newVal) {
            this.collectTypes = newVal
            if (this.collectTypes != 1) {
                this.$set(this, 'collecColor', 'collecColor-no')
            } else {
                this.$set(this, 'collecColor', 'collecColor-yes')
            }
        }
    }
}
</script>

<style lang="less">
.collecColor-no {
    background: url('../../assets/收藏@3x.png') no-repeat center/cover;
}
.collecColor-yes {
    background: url('../../assets/收藏颜色@3x.png') no-repeat center/cover;
}
</style>


